<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之间的通信(兄弟之间)</title>
</head>
<body>
<fieldset id="root">
    <legend><h1>这是父组件</h1></legend>
    <child1 @c1_event="getC1msg"></child1>
    <child2 :c2_v1="V1" :c2_v2="V2"></child2>

</fieldset>
<template id="child1">
    <fieldset>
        <legend><h2>这是child1子组件</h2></legend>
        <button @click="sendTO">传数据给child2</button>

    </fieldset>
</template>
<template id="child2">
    <fieldset>
        <legend><h2>这是child2子组件</h2></legend>
        <p>接受来child1的数据{{c2_v1+c2_v2}}</p>
    </fieldset>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let child1 = {
        template:"#child1",
        data:function () {
return{
    c1msg:"这是来自child1的数据"
}
        },
        methods:{
            sendTO(){
                //触发绑定事件 并且传递参数
                this.$emit("c1_event",this.c1msg,"快快快");
            }
        }
    };
    let child2 = {
        template:"#child2",
        props:["c2_v1","c2_v2"]

    };
    new Vue({
        el: "#root",
        data: {
            V1:"",
            V2:"",
        },
        methods: {
            getC1msg(a,b){
                console.log(a,b);
                this.V1=a;
                this.V2=b;
            }
        },
        components: {
            child1,
            child2,
        }
    })
</script>